<template>
	<view>
		<view class="headbox">
			<view class="header" v-if="is_login" :style="{'padding-top': marginTopHeight + 'rpx'}"
				@click="jumpurl('/pages/user/uiserInfo')">
				<view class="headimage">
					<image src="@/static/login/logo.png" mode=""></image>
				</view>
				<view class="titletext1">{{userInfo.username}}</view>
			</view>
			<view class="header" v-else="!is_login" :style="{'padding-top': marginTopHeight + 'rpx'}">
				<view class="headimage">
					<image src="@/static/login/logo.png" mode=""></image>
				</view>
				<view class="titletext" @click="jumpurl('/pages/login/logintwice')">未登录，点击登录</view>
			</view>
		</view>
		<view class="listBox">
			<view class="mainpadding ffffff radius">
				<view class="flexbetween pdl"  @click="goToOrder()">
					<view class="flexleft">
						<u-icon name="file-text" color="#f5ac4f" size="28"></u-icon>
						<view class="margin_left bold hei_text titletext">我的订单</view>
					</view>
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</view>
				<view class="flexbetween margin_top pdl"  @click="jumpurl('/pages/user/tuihuosh')">
					<view class="flexleft">
						<u-icon name="error-circle" color="#f5ac4f" size="28"></u-icon>
						<view class="margin_left bold hei_text titletext">退货售后</view>
					</view>
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</view>
				<view class="flexbetween margin_top pdl"  @click="onClick(1)">
					<view class="flexleft">
						<u-icon name="grid" color="#f5ac4f" size="28"></u-icon>
						<view class="margin_left bold hei_text titletext">财务往来</view>
					</view>
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</view>
				<view class="flexbetween margin_top pdl"  @click="onClick(2)">
					<view class="flexleft">
						<u-icon name="rmb-circle" color="#f5ac4f" size="28"></u-icon>
						<view class="margin_left bold hei_text titletext">优惠券
						<text style="color:#28c445;">{{yhq_num?"("+yhq_num+"张可用)":""}}</text>
						</view>
					</view>
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</view>
				<view class="flexbetween margin_top pdl"  @click="onClick(3)">
					<view class="flexleft">
						<u-icon name="bookmark" color="#f5ac4f" size="28"></u-icon>
						<view class="margin_left bold hei_text titletext">积分<text style="color:#28c445;">（{{is_login?userInfo.score:0}}分）</text></view>
					</view>
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</view>
				<view class="flexbetween margin_top pdl"  @click="jumpurl('/pages/user/jifensc')">
					<view class="flexleft">
						<u-icon name="gift" color="#f5ac4f" size="28"></u-icon>
						<view class="margin_left bold hei_text titletext">积分商城</view>
					</view>
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</view>
				<view class="flexbetween margin_top pdl"  @click="onClick(4)">
					<view class="flexleft">
						<u-icon name="account" color="#f5ac4f" size="28"></u-icon>
						<view class="margin_left bold hei_text titletext">我推荐的客户<text style="color:#28c445;">{{wtjdkh_num?"("+wtjdkh_num+")":""}}</text></view>
					</view>
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</view>
				<view class="flexbetween margin_top pdl"  @click="onClick(5)">
					<view class="flexleft">
						<u-icon name="list" color="#f5ac4f" size="28"></u-icon>
						<view class="margin_left bold hei_text titletext">陈列任务
						<text style="color:#28c445;">{{wlq_num?"("+wlq_num+")":""}}</text>
						</view>
					</view>
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</view>
				<view class="flexbetween margin_top"  @click="onClick(8)">
					<view class="flexleft">
						<u-icon name="phone" color="#f5ac4f" size="28"></u-icon>
						<view class="margin_left bold hei_text titletext">客服电话（微信同号）</view>
					</view>
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 两个按钮 -->
		<view class="btnBox" v-if="is_login">
			<view class="btn margin_top">
				<button open-type="share" class="footer_stars flexcenter " >
					<view class=" fontColor1">{{userInfo.title}}</view>
					<view>
						<image src="@/static/userOrder/erweima.png" mode=""></image>
					</view>
				</button>
			</view>
			<view class="btn blod fontColor" @click="outLogin" style="padding: 30rpx;">退出登录</view>
		</view>
		<tabbar current=3 ref="cars"></tabbar>

	</view>
</template>

<script>
	const httpRequest = require('@/commonFun/httpRequest.js');
	export default {
		data() {
			return {
				is_login: false,
				kefu:"",
				userInfo: {}, // 用户信息
				wlq_num:0,
				wtjdkh_num:0,
				yhq_num:0,
				marginTopHeight:"",
			};
		},
		onLoad() {
			uni.hideTabBar(); //隐藏tab
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()//可以获取小程序胶囊的位置。
			this.marginTopHeight = menuButtonInfo.top
		},
		onShow: function() {
			this.is_login = httpRequest.checkIsLogin();
			if (this.is_login) {
				this.userMy()
				this.init()
				this.chenlie()
				this.getwtjd()
				this.getyhq()
			}
			this.$refs.cars.getlist()
		},
		methods: {
			getyhq() {//获取我的优惠券数量
				let _this = this;
				httpRequest.request('/customapi/user/myCoupon', 'POST', {
					page: 1,
					limit: 100000,
					status: 10
				}, false, false, true).then(res => {
					this.yhq_num = res.data.total
				})
			},
			getwtjd() {//获取我推荐的客户数量
				let _this = this;
				httpRequest.request('/customapi/user/myTeam', 'POST', {
					page: 1,
					limit: 100000,
				}, false, false, true).then(res => {
					this.wtjdkh_num = res.data.total
				})
			},
			chenlie(){//获取陈列任务数据
				let _this = this;
				httpRequest.request('/customapi/user/clrwList','POST',{
				}).then(res => {
					if (res.code == 1) {
						this.wlq_num = res.data.wlq_num
					}else{
						httpRequest.toast(res.msg);
					}
				})
			},
			init(){
				httpRequest.request('/customapi/index/getConfigInfo', 'POST', {
				}).then(resp => {
					this.kefu = resp.data.kf_tel
				})
			},
			onShareAppMessage() {
				return {
					title: "推荐有奖",
					path: "pages/index/index?suid=" + this.userInfo.id,
					imageUrl:"https://xunbo.yuntaiqikeji.com/uploads/20230816/f28b6d0e37456dba92b4a9bd86eb015a.jpg"
				}
			},
			jumpurl(url) {
				uni.navigateTo({
					url
				})
			},
			// 退出登录
			outLogin() {
				httpRequest.modal('提示', '确定退出登录吗？', true, (res) => {
					if (res) {
						uni.removeStorageSync('token');
						uni.removeStorageSync('user_id');
						httpRequest.toast("退出登录成功！")
						this.is_login = httpRequest.checkIsLogin();
						// setTimeout(() => {
						// 	uni.reLaunch({
						// 		url: "/pages/login/logintwice"
						// 	})
						// }, 500)
					}
				})
			},
			// 调取我的接口
			userMy() {
				let _this = this
				httpRequest.request('/customapi/user/index', 'POST', {}).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			onShareAppMessage() {
				return {
					title: "推荐有奖",
					path: "pages/index/index?suid=" + this.userInfo.id,
					imageUrl: this.ewmimg
				}
			},
			setBtn(i) {
				let _this = this
				let url = _this.ewmimg
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: '/pages/login/logintwice'
					})
					return;
				}
				if (i == "设置") {
					uni.navigateTo({
						url: './userSet/userSet',
					});
				}
				if (i == "分享二维码") {
					return
					uni.downloadFile({ //下载文件资源到本地,返回文件的本地临时路径
						url: url, //网络图片路径
						success: (res) => {
							var imageUrl = res.tempFilePath; //临时文件路径
							uni.saveImageToPhotosAlbum({ //保存图片到系统相册
								filePath: imageUrl,
								success: (res) => {
									httpRequest.toast("保存成功")
								},
								fail: (err) => {
									console.log(err, "失败原因")
									httpRequest.toast("保存失败")
								}
							})
						}
					})
				}
			},
			onClick(i) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: '/pages/login/logintwice'
					})
					return;
				}
				if (i == 1) {
					// 财务往来
					uni.navigateTo({
						url: './Finance/Finance'
					});
				} else if (i == 2) {
					//优惠券
					uni.navigateTo({
						url: './goToEnvelopes/goToEnvelopes'
					});
				} else if (i == 3) {
					//积分
					uni.navigateTo({
						url: "./Finance/jifenDetail"
					})
				} else if (i == 4) {
					// 推荐客户
					uni.navigateTo({
						url: './recommendUser/recommendUser'
					});
				} else if (i == 5) {
					// 陈列任务
					uni.navigateTo({
						url: './displayTask/displayTask'
					});
				} else if (i == 7) {
					// 收货地址
					uni.navigateTo({
						url: './getAddress/getAddress'
					});
				} else if (i == 6) {
					// 浏览历史
					uni.navigateTo({
						url: './history/history'
					});
				} else if (i == 8) {
					uni.makePhoneCall({
						phoneNumber: this.kefu, //电话号码
					})
				}
			},
			// 优惠券 // 红包
			// goToEnvelopes(){
			// 	uni.navigateTo({
			// 		url: './goToEnvelopes/goToEnvelopes'
			// 	});
			// },
			goToOrder(i) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: '/pages/login/logintwice'
					})
					return;
				}
				uni.navigateTo({
					url: './myOrder/myOrder'
				});
			},
			jumplogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.pdl{
		border-bottom:1rpx solid rgba(0,0,0,.03);
		padding-bottom: 30rpx;
	}
	.headbox {
		// height: 170rpx;
		width: 100%;
		background: #fff;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		padding: 40rpx 0;
		z-index: 1000;
	}

	.header {
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.headimage {
		margin-right: 30rpx;
		width: 75rpx;
		height: 75rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.username {}
</style>

<style scoped lang="scss">
	.footer_stars {
		line-height: 0;
		padding: 20rpx 0;
	}

	button {
		border: none !important;
		// border: none;
		border-radius: 0px;
		background-color: rgba(1, 1, 1, 0) !important;
	}

	button {
		color: #333333 !important;
		// width: 100%;
		// background-color: white;
		border: none;
		// text-align: center;
		padding: 0px;
		margin: 0px;
		font-size: 32rpx;
	}

	/* 去除边框 */
	button::after {
		border: none;
		border-radius: 0;
	}

	.titletext {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.titletext1 {
		font-size: 28rpx;
		color: #333333;
	}

	.blod {
		font-weight: bold;
		font-size: 32rpx;
		color: #333;
	}

	.btnBox {
		padding: 0 20rpx 180rpx 20rpx;

		.btn {
			padding: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #ffffff;
			font-size: 36rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;

			view {
				margin-left: 10px;

				
			}
		}

		.fontColor1 {
			// color: #f5ac4f !important;
			font-size: 36rpx;
			color: #28C445 !important;
		}
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	// 列表
	.listBox {
		padding: 0 20rpx 0 20rpx;
		margin-top: 230rpx;
		.list {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			background-color: #ffffff;
			font-size: 0.7rem;
			color: #333333;
			border-radius: 8px;
			margin-bottom: 20rpx;
		}
	}

	// 订单部分
	.orderBox {
		padding: 30rpx 20rpx;
		margin-top: 230rpx;

		.order {
			text-align: center;
			font-size: 0.6rem;
			border-radius: 8px;
			padding: 20rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;

			view {
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}

	.phones {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;

		view {
			margin-top: 6rpx;
		}
	}

	// 公用

	.fontColor {
		color: #333333;
		font-size: 32rpx;
	}

	.font06rem {
		font-size: 0.6rem;
		color: #999999;
	}

	.flex {
		display: flex;
	}

	.flexAlign {
		display: flex;
		align-items: center;
	}

	.color1 {
		background-color: #f5ac4f;
		font-size: 20rpx !important;
	}

	.color2 {
		font-size: 20rpx !important;
		background-color: #66ff22;
	}

	.publci {
		text-align: center;
		position: relative;
		width: 240rpx;
		height: 30px;
		align-items: center;
		line-height: 30px;

		view {
			position: absolute;
			top: 0;
			right: 0;
			color: #ffffff;
			border-radius: 20px;
			padding: 20rpx 8rpx;
			line-height: 0;
			font-size: 0.6rem;
		}
	}

	.fontSize {
		margin-top: 20rpx;
		font-size: 0.9rem;
		color: #333333;
	}

	// 红包部分
	.detailBox {
		padding: 20rpx;

		.detail {
			background-color: #ffffff;
			padding: 50rpx 20rpx;
			border-radius: 8px;
			display: flex;
			justify-content: space-around;
			text-align: center;
			font-size: 0.7rem;

			.center {
				align-items: center;
				margin-top: 4rpx;

				.centerChiled {
					align-items: center;
					border-left: 1px solid #999999;
					height: 50rpx;
				}
			}
		}
	}

	// 头部
	.header {
		view {
			button {
				color: #333333 !important;
				width: 100%;
				border: none;
				text-align: center;
				padding: 0px;
				margin: 0px;
				line-height: 1.3;
				font-size: 16px;
				background-color: #ffffff;
			}

			/* 去除边框 */
			button::after {
				border: none;
				border-radius: 0;
				// background-color: #ffffff;
			}
		}
	}

	.logoposition {
		// position: absolute;
		// bottom: 200rpx;
		// left: 0;
		margin-top: 30rpx;
		width: 100%;
	}

	.logotoptext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.logobottomtext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.phoneicon2 {
		width: 16rpx;
		height: 16rpx;
		background-image: url("@/static/smallIcon/phone.png");
		background-size: 100% 100%;
		margin-right: 15rpx;
	}
</style>